<template>
	<view class="main">
		<uni-popup ref="inputDialog" background-color="#fff" :mask-click="false">

			<form >

				<view class="form">
					<view class="desc">
						{{desc}}
					</view>
					<view style="color: red;text-align: center;">
						···支付密码为6位数字···
					</view>
					<view v-if="hasPayPwd" class="uni-form-item uni-column">
						<view class="title">旧支付密码</view>
						<input class="uni-input" name="nickname" placeholder="请输入旧支付密码" type="password" maxlength="6"
							v-model="oldPayPwd" />
					</view>
					<view>
						<view class="uni-form-item uni-column">
							<view class="title">{{hasPayPwd ? ' 新支付密码' : '支付密码'}}</view>
							<input class="uni-input" name="nickname" type="password" maxlength="6" v-model="newPayPwd"
								:placeholder="hasPayPwd ? '请输入新支付密码' : '请输入支付密码'" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">{{hasPayPwd ? '确认新支付密码' : '确认支付密码'}}</view>
							<input class="uni-input" name="nickname" type="password" maxlength="6"
								:placeholder="hasPayPwd ? '请确认新支付密码' : '请确认支付密码'" v-model="repeatNewPayPwd" />
						</view>
					</view>
					<view class="btn-layout">
						<button class="btn" type="default" size="normal" @click.stop="cancel">取消</button>
						<button class="btn" type="primary" size="normal" @click.stop="confirm">确定</button>
					</view>
				</view>

			</form>

		</uni-popup>
	</view>
</template>

<script>
	import CommonNavBar from "components/common/NavBar/CommonNavBar";

	import {
		validPayPwd,
		setPayPwd
	} from "network/user";

	export default {
		components: {
			CommonNavBar,
		},
		props: {
			hasPayPwd: {
				type: Boolean,
				default () {
					return false;
				},
			},
			desc: {
				type: String,
				default () {
					return ""
				}
			}
		},
		data() {
			return {
				newPayPwd: "",
				repeatNewPayPwd: "",
				oldPayPwd: ""
			};
		},
		mounted() {
			this.$refs.inputDialog.open('center')
		},
		computed: {
			validNewPayPwd() {
				return /^[0-9]{6}$/.test(this.newPayPwd);
			},
			validRepeatNewPayPwd() {
				return this.validNewPayPwd && this.newPayPwd === this.repeatNewPayPwd;
			}
		},
		methods: {
			async confirm() {
				let isvalid = true;
				if (!this.newPayPwd.length || !this.oldPayPwd.length || !this.repeatNewPayPwd.length) {
					this.error('内容不能为空');
				} else if (this.hasPayPwd) {
					let pwd = {
						pwd: this.oldPayPwd,
					};
					await validPayPwd(pwd).then(async (res) => {
						isvalid = res[1].data.tag;
						if (!res[1].data.tag) {
							this.error('支付密码错误');
						}else{
							this.success('操作成功')
						}
					});
				}
				if (isvalid) {
					if (this.validRepeatNewPayPwd) {
						let pwd = {
							pwd: this.newPayPwd,
						};
						setPayPwd(pwd).then(async (res) => {
							if (res[1].data.tag) {
								await this.success('设置成功');
								this.$emit("add");
								this.$emit("done");
							} else {
								await this.error('设置失败');
								this.$emit("done");
							}
						});
					} else {
						if (this.newPayPwd.length == 6 && this.repeatNewPayPwd.length ===
							6 && this.validRepeatNewPayPwd) {
							this.error('密码不一致');
						} else {
							this.error('密码必须为6位数字');
						}
					}
				}

			},
			async cancel() {
				this.$emit("done");
			},
		}
	};
</script>
<style lang="scss" scoped>
	.form {
		width: 80vw;
		padding: 10rpx 20rpx;
	}

	.btn-layout {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 20rpx auto;
	}

	.btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
		text-align: center;
	}

	.desc {
		text-align: center;
		font-size: 34rpx;
	}
</style>
